﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Search Tag</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/
        input[type="text"] {
            width: 200px;
        }

        select {
            width: 204px;
        }

        label {
            display:inline-block;
            width: 140px;
        }

        input[type="button"] {
            width: 120px;
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 1 });
            initSpread(spread);
        });

        function initSpread(spread) {
            var spreadNS = GcSpread.Sheets,
                sheet = spread.sheets[0];
            
            // add tags for demo use
            sheet.getCell(0, 0).tag("A1 tag");
            sheet.getCell(1, 6).tag("demo tag for G2");
            sheet.setTag(3, 1, "B4 tag demo");

            sheet.setText(0, 0, "tag set");
            sheet.setText(1, 6, "tag set");
            sheet.setText(3, 1, "tag set");

            var r, c;

            for (r = 7; r <= 10; r++) {
                for (c = 0; c <= 2; c++) {
                    sheet.setTag(r, c, "Cell tag " + String.fromCharCode(65 + c) + (r + 1));
                    sheet.setText(r, c, "tag set");
                }
            }
            
            for (r = 5; r <= 8; r++) {
                for (c = 5; c <= 7; c++) {
                    sheet.setTag(r, c, "demo tag " + String.fromCharCode(65 + c) + (r + 1));
                    sheet.setText(r, c, "tag set");
                }
            }

            sheet.bind(spreadNS.Events.EnterCell, function () {
                var tag = sheet.getTag(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());

                if (tag == null) {
                    $("#txtTag").val("");
                }
                else if (typeof tag === "string") {
                    $("#txtTag").val(tag);
                } else {
                    $("#txtTag").val(JSON.stringify(tag));
                }
            });

            $("#btnSearchTag").click(function () {
                var searchOrder = parseInt($("#searchOrder").val(), 10);

                if (isNaN(searchOrder)) {
                    return;
                }

                var condition = new spreadNS.SearchCondition();
                condition.searchTarget = spreadNS.SearchFoundFlags.CellTag;
                condition.searchString = $("#txtSearchTag").val();
                condition.findBeginRow = sheet.getActiveRowIndex();
                condition.findBeginColumn = sheet.getActiveColumnIndex();

                condition.searchOrder = searchOrder;
                if (searchOrder === 0) {
                    condition.findBeginColumn++;
                } else {
                    condition.findBeginRow++;
                }

                var result = sheet.search(condition);
                if (result.foundRowIndex < 0 && result.foundColumnIndex < 0) {
                    condition.findBeginRow = 0; 
                    condition.findBeginColumn = 0;
                    result = sheet.search(condition);
                }

                var row = result.foundRowIndex,
                    col = result.foundColumnIndex;

                if (row < 0 && col< 0) {
                    $("#txtTag").val("Not found");
                }
                else {
                    sheet.setActiveCell(row, col);
                    $("#txtTag").val(sheet.getTag(row, col));
                }
            });
        }
        /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width: 100%; height: 420px; border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <label for="txtSearchTag">Search tag contains: </label>
                <input type="text" id="txtSearchTag" placeholder="Input content contains in tag" />
            </div>
            <div class="option-row">
                <label for="searchOrder">Search Order:</label>
                <select id="searchOrder">
                    <option value="0">Column First (ZOrder)</option>
                    <option value="1">Row First (NOrder)</option>
                </select>

                <input type="button" id="btnSearchTag" value="Search tag" title="Search cell with tag contains specified content and active the cell" />
            </div>

            <div class="option-row">
                <label for="txtTag">Cell Tag: </label>
                <input type="text" id="txtTag" />
            </div>
        </div>
    </div>
</body>
</html>
